import classNames from 'classnames'
import { createContext } from 'react'

export const DISPLAY_NAME_SELECT = 'Select'

export interface SelectProps {
  /**指定默认选中的条目	 可以是是字符串或者字符串数组*/
  defaultValue?: string | string[]
  /** 选择框默认文字*/
  placeholder?: string
  /** 是否禁用*/
  disabled?: boolean
  /** 是否支持多选*/
  multiple?: boolean
  /** select input 的 name 属性	 */
  name?: string
  /**选中值发生变化时触发 */
  onChange?: (selectedValue: string, selectedValues: string[]) => void
  /**下拉框出现/隐藏时触发 */
  onVisibleChange?: (visible: boolean) => void
}

export interface ISelectContext {
  onSelect?: (value: string, isSelected?: boolean) => void
  selectedValues: string[]
  multiple?: boolean
}
export const SelectContext = createContext<ISelectContext>({
  selectedValues: [],
})

// 获取组件配置的class
export const getSelectClassNames = (
  props: SelectProps,
  extendClass?: () => Object
) => {
  const { disabled, multiple } = props
  return classNames(
    'select',
    {
      'is-disabled': disabled,
      'is-multiple': multiple,
    },
    extendClass && extendClass()
  )
}
